const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

const path = require('path');

const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");


module.exports = {
  mode: "production",
  entry: {
    axios: ["axios"],
    jquery: ["jquery"],
    "v-distpicker": ["v-distpicker"],
    "vue-lazyload": ["vue-lazyload"],
    moment: ["moment"],
    quanjiatong: ["vue", "vue-router", "vuex"],
    bundle: "./src/main.js" //千万不要忘记了哦
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: 'js/[name].js'
  },
  module: {
    rules: [{
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.(ttf|woff|eot|svg|jpg|gif|png)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 3000,
            name: 'statics/img/[name]-[hash:8].[ext]'
          }
        }]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  resolve: {
    extensions: [".vue", ".js", ".json"]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
    splitChunks: {
      chunks: "all",//入口文件中的第三方包都抽离
      minSize: 20000,//包的大小最小是20KB
      minChunks: 1,//至少被引用一次
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: true
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './template.html',
      minify: {
        removeComments: true, //删除注释
        minifyCSS: true, //压缩css
        minifyJS: true, //压缩js
        collapseWhitespace: true //压缩空格
      }
    }),
    
    new webpack.ProvidePlugin({
      $: "jquery", //key代表的将来使用jquery时候的变量名称，值是包的名称
      jQuery: "jquery"
    }),
    //自动删除dist文件的
    new CleanWebpackPlugin("dist"),
    //压缩moment的
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(zh-cn|en-gb)$/),
    //压缩css
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    })
  ]
}